{% extends "base.html" %}

{% block extra_head %}
  <meta name="description" content="{{ _('Lista de artículos publicados en Freak Spot.') }}">
  <meta name="keywords" content="{{ _('archivo,artículos,historia,lista de artículos') }}">
  <style>
    .contenedor-arbol, .contenedor-arbol ul, .contenedor-arbol li {
      position: relative;
      margin: 0;
      padding-left: 2.5%;
      line-height: normal;
    }

    .contenedor-arbol ul {
      list-style: none;
    }

    .contenedor-arbol li::before, .contenedor-arbol li::after {
      content: "";
      position: absolute;
      left: -12px;
    }

    .contenedor-arbol li::before {
      border-top: 2px solid #111;
      top: 9px;
      width: 12px;
      height: 0;
    }

    .contenedor-arbol li::after {
      border-left: 2px solid black;
      height: 100%;
      width: 0px;
      top: 2px;
    }

    .contenedor-arbol ul > li:last-child::after {
        height: 8px;
    }
  </style>
{% endblock %}

{% block title %}{% trans %}Lista de artículos de {{ SITENAME }}{% endtrans %}{% endblock %}
{% block content %}
  <article class="page type-page status-publish hentry">
    <header class="entry-header">
      <h1 class="entry-title">{% trans %}Lista de artículos de {{ SITENAME }}{% endtrans %}</h1>
    </header>
    <div class="entry-content">
      <div class="contenedor-arbol">
        <p>{{ ngettext('%(num)d artículo', '%(num)d artículos', dates|length) }}</p>
        <ul>
        {% for article in dates %}
          {% set current_year = article.date|strftime('%Y') %}
          {% set current_month = article.date|strftime('%m') %}
          {% if loop.previtem %}
            {% set previous_year = loop.previtem.date|strftime('%Y') %}
            {% set previous_month = loop.previtem.date|strftime('%m') %}
          {% endif %}

          {% if current_year != previous_year %}
            {% if loop.previtem %}
              </ul>
              </li> <!-- Cierra el mes -->
              </ul>
              </li> <!-- Cierra el año -->
            {% endif %}
              <li><a href="{{ SITEURL }}/archives/{{ current_year }}/">{{ current_year }}</a>
              <ul>
                <li><a href="{{ SITEURL }}/archives/{{ current_year }}/{{ current_month }}/">{{ article.date|strftime('%B') }}</a>
                  <ul>
          {% elif current_month != previous_month %}
            {% if loop.previtem %}
              </ul>
              </li>
            {% endif %}
              <li><a href="{{ SITEURL }}/archives/{{ current_year }}/{{ current_month }}/">{{ article.date|strftime('%B') }}</a>
              <ul>
          {% endif %}

          <li><a href="{{ SITEURL }}/{{ article.url }}" title="{{ article.locale_date}}">{{ article.title }}</a></li>


          {% if loop.last %}
            </ul>
            </li> <!-- Cierra el mes -->
            </ul>
            </li> <!-- Cierra el año -->
          {% endif %}
        {% endfor %}
      </ul>
      </div>
    </div>
  </article>
{% endblock %}
